@use "../../common.scss";

.nuclear.field.input {
    position: relative;

    .input input {
        background: rgba(common.$bglighter, 0.25);
        color: common.$white;
        caret-color: common.$white;
        border: none;

        &::placeholder {
            color: rgba(common.$white, 0.6);
        }

        &::selection {
            background-color: common.$blue;
            color: common.$white;
        }

        &:active,
        &:focus {
            background: rgba(common.$bglighter, 0.25);
            color: common.$white;
            border: none;

            &::placeholder {
                color: rgba(common.$white, 0.2);
            }
        }
    }

    &.error {
        .input input {
            background: rgba(common.$bglighter, 0.25);
            color: common.$red;
            border: 1px solid common.$red;

            &:active,
            &:focus {
                background: rgba(common.$bglighter, 0.25);
                color: common.$red;
                border: 1px solid common.$red;
            }
        }

        label {
            color: common.$red;
        }

        :global(.ui.pointing.below.prompt.label)[role=alert] {
            position: absolute;
            top: 0;
            right: 0;
            color: common.$red !important;
            background: none !important;
            border: none !important;
            padding: 0;
            margin: 0;
            line-height: 20px;
            font-size: 13px;
            font-weight: normal;

            &::before {
                display: none;
            }
        }
    }

    label {
        color: common.$white;
        font-variant: small-caps;
    }
}
